<template>
    <div class="cardlist">
        <el-card class="card" v-for="stu in stus">
            <template #header>
                <div class="card-header">
                    <span><el-avatar :size="50" :src="stu.avatar" /></span>
                    <span class="name">{{ stu.name }}</span>
                </div>
            </template>
            <div>
                <p>年龄：{{ stu.age }}</p>
                <p>性别：{{ stu.sex }}</p>
                <p>总分：{{ stu.score.yw + stu.score.sx + stu.score.yy }} </p>
            </div>
            <el-tooltip placement="bottom" v-if="stu.score.yw >= 60 & stu.score.sx >= 60 & stu.score.yy >= 60">
                <template #content>
                    <p>语文：{{ stu.score.yw }}</p>
                    <p>数学：{{ stu.score.sx }}</p>
                    <p>英语：{{ stu.score.yy }}</p>
                </template>
                <el-button>查看成绩单</el-button>
            </el-tooltip>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'Report',
    props: {
        stus: Array
    },
    setup() {


    }
}
</script>

<style scoped>
.cardlist
{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }  

.card {
  min-width: 200px;
  height: 280px;
  margin: 10px;
}

.card .card-header span {
  vertical-align: middle;
}

.card .card-header .name {
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
</style>